<template>
  <div class="longinbgc">
    <div class="longin">
      <h2>叩丁狼电商管理系统</h2>
      <input
        :class="{ active: prompt1 }"
        type="text"
        placeholder="账号"
        v-model="text"
        @blur="tips1"
      />
      <p v-show="prompt1">请输入账号</p>
      <input
        v-model="text2"
        :class="{ active: prompt2 }"
        type="password"
        name=""
        id=""
        placeholder="密码"
        @blur="tips2"
      />
      <p v-show="prompt2">密码不能为空</p>
      <span class="btn" @click="loginsuccessfully">登录</span>
    </div>
  </div>
</template>
 
<script>
import { gettoken } from "../request/httpApi";
export default {
  data() {
    return {
      prompt1: false,
      prompt2: false,
      text: "admin",
      text2: "1",
    };
  },
  methods: {
    loginsuccessfully() {
      gettoken({
        username: this.text,
        password: this.text2,
      }).then((okk) => {
        // console.log(okk);
        // console.log(okk.data.token);
        localStorage.setItem("token", okk.data.token);
      });
      this.$router.push("/list");
    },
    tips1() {
      if (this.text.trim()) {
        this.prompt1 = false;
      } else {
        this.prompt1 = true;
      }
    },
    tips2() {
      if (this.text.trim()) {
        this.prompt2 = false;
      } else {
        this.prompt2 = true;
      }
    },
    change() {
      if (this.text.trim()) {
        this.prompt1 = false;
      } else {
        this.prompt1 = true;
      }
    },
  },
};
</script>
 
<style lang = "less" scoped>
.longinbgc {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #324057;
  .longin {
    width: 336px;
    height: 220px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    h2 {
      color: #fff;
      margin-bottom: 10px;
    }
    p {
      color: #f56561;
      font-size: 6px;
      line-height: 22px;
      text-align: left;
      /* */
    }
    input {
      height: 40px;
      width: 100%;
      border-radius: 5px;
      margin-bottom: 22px;
      padding-left: 15px;
      box-sizing: border-box;
      outline: none;
      /*  */
    }
    .btn {
      display: block;
      height: 40px;
      line-height: 40px;
      width: 100%;
      background-color: #409eff;
      border-radius: 5px;
      font-size: 12px;
      color: #fff;
      cursor: pointer;
    }
    .active {
      border: 1px solid #f56561;
      margin-bottom: 0px;
    }
  }
}
</style>